<template>
    <!-- 趋势分析 -->
    <view class='trend_page'>
        <view class='label'>
            <view v-for='(item,index) in charts_data.series' :key='index'>
                <view :style='{background: item.color}'></view>
                <text>{{item.name}}</text>
            </view>
        </view>
        <view class='charts_box'>
            <graph :width='charts_width' :charts_data='charts_data'></graph>
            <view class='x_data' v-if='false'>
                <view>
                    <view></view>
                </view>
                <view>
                    <text>0223</text>
                    <text>0329</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>

    import graph from './charts/graph.vue'
    import color from './charts/color.js'

    export default {
        components: {
            graph
        },
        props: {
            content: Array
        },
       data() {
           return {
               color,
              // 图表宽度
              charts_width: 0,
                // 图表数据
              charts_data: {
                    // x轴数据
                    categories: [],
                    // y轴数据  
                    y_data: {                                          
                        min_num: 0,
                        max_num: 180,
                    },
                    // 每条线数据
                    series: []
                },
           }
       },
       async mounted() {
           this.charts_width = await this.$getDomInfo(".charts_box","width");

            let obj = {};
            let siteType = {
                app: "App",
                foreign: "境外",
                foreignSocial: "境外社交",
                forum: "论坛",
                news: "新闻",
                pingmei: "平媒",
                weibo: "微博",
                weixin: "微信",
            };
            
            Object.keys(siteType).forEach((key,i) => {
                obj[key] = {
                    name: siteType[key],
                    data: [],
                    color: this.color[i]
                };
            });

            let date_arr = [];
            this.content.forEach(val => {
                if (date_arr.indexOf(val.tiem) === -1) {
                    date_arr.unshift(val.time.slice(5,10));
                }
                obj[val.sourcetype].data.unshift(val.hot);
            });
            this.charts_data.categories = [...new Set(date_arr)];

            Object.keys(obj).forEach(key => {
                if (obj[key].data.length > 0) this.charts_data.series.unshift(obj[key]);
            });
       }
    }
</script>

<style lang="scss" scoped>
.trend_page {
    width: 100%;
    .label {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        font-size: 24upx;
        color: #666;
        margin-bottom: 25upx;
        >view {
            width: 20%;
            display: flex;
            align-items: center;
            margin-top: 15upx;
            &:nth-child(1),&:nth-child(2),&:nth-child(3),&:nth-child(4),&:nth-child(5) {
                margin: 0;
            }
            >view {
                width: 12upx;
                height: 12upx;
                border-radius: 100%;
                margin-right: 10upx;
            }
        }
    }
    .charts_box {
        width: 100%;
        .x_data {
            width: 100%;
            >view {
                width: 100%;
                display: flex;
                align-items: center;
                &:nth-child(1) {
                    height: 60upx;
                    justify-content: center;
                    background: #2191FF;
                    border: 2upx solid #E2E2E2;
                    box-sizing: border-box;
                    border-radius: 6upx;
                    overflow: hidden;
                    >view {
                        width: 95%;
                        height: 56upx;
                        background: #F7F7F7;
                    }
                }
                &:nth-child(2) {
                    height: 50upx;
                    justify-content: space-between;
                    font-size: 20upx;
                    color: #666;
                }
            }
        }
    }
}
</style>